<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="../../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<select id="sheng"></select>
		<select id="shi" hidden></select>
		<select id="qu" hidden></select>
		<script type="text/javascript">
			let Shengarr=[
				{id:1,
				count:"广东省",
				pantId:null
				},
				{id:2,
				count:"湖南省",
				pantId:null
				}
			]
			let Shiarr=[
				{id:1,
				count:"广州市",
				pantId:1
				},
				{id:2,
				count:"中山市",
				pantId:1
				},
				{id:3,
				count:"长沙市",
				pantId:2
				},
				{id:4,
				count:"衡阳市",
				pantId:2
				}
			]
			let Quarr=[
				{id:1,
				count:"白云区",
				pantId:1
				},
				{id:2,
				count:"黄浦区",
				pantId:1
				},
				{id:3,
				count:"中山一区",
				pantId:2
				},
				{id:4,
				count:"中山二区",
				pantId:2
				},
				{id:5,
				count:"长沙一区",
				pantId:3
				},
				{id:6,
				count:"长沙二区",
				pantId:3
				},
				{id:7,
				count:"衡阳一区",
				pantId:4,
				
				},
			]
			function jiaupat(selector,arr,sheyigId){
				      $(selector).empty();
					  $(selector).show();
					for (let item of arr) {
						if (sheyigId&&parseInt(sheyigId)!==item.pantId) {
							continue;
						}
						$(selector).append(`<option value=${item.id}>${item.count}</option>`);
					}
				}
				
				jiaupat("select[id='sheng']",Shengarr);
				
				$("select[id='sheng']").change(function(){
					let option=$(this).find("option:selected");
					let val=option.val();
					console.log(typeof val);
					let text=option.text();
					jiaupat("select[id='shi']",Shiarr,val);
				})
				$("select[id='shi']").change(function(){
					let option=$(this).find("option:selected");
					let val=option.val();
					let text=option.text();
					jiaupat("select[id='qu']",Quarr,val);
				})
		</script>
	</body>
</html>
